<template>
  <div class="line-echart">
    <base-chart id="chartsMax" :options="options" :height="height" />
  </div>
</template>

<script setup>
import BaseChart from '@/base-ui/echart/base-chart.vue'
import { computed, reactive, watch } from 'vue'

const props = defineProps({
  height: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
  // 时间
  xLabels: {
    type: Array,
    default: () => []
  },
  // 实测水位
  realwaterLevel: {
    type: Array,
    default: () => []
  },
  // 模拟水位
  simulateWater: {
    type: Array,
    default: () => []
  },
  // 降雨量
  rainArea: {
    type: Array,
    default: () => []
  },
  // 模拟流量
  simulateFlow: {
    type: Array,
    default: () => []
  },
  // 实测流量
  realFlow: {
    type: Array,
    default: () => []
  },
  // 标线数据
  warnInfo: {
    type: Object,
    default: () => {}
  },
  //预报时间
  fcTime: {
    type: String,
    default: ''
  }
})

const options = computed(() => {
  return {
    color: ['#5793f3', '#d14a61', '#675bba'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      data: [
        { name: '模拟水位', itemStyle: { opacity: 0 } },
        { name: '实测水位', itemStyle: { opacity: 0 } },
        { name: '模拟流量', itemStyle: { opacity: 0 } },
        { name: '实测流量', itemStyle: { opacity: 0 } },
        //
        { name: '警戒水位', itemStyle: { opacity: 0 } },
        { name: '警戒流量', itemStyle: { opacity: 0 } },
        { name: '汛限水位', itemStyle: { opacity: 0 } },
        { name: '允许最高水位', itemStyle: { opacity: 0 } },
        { name: '允许雍高水位', itemStyle: { opacity: 0 } },

        '降雨量'
      ]
    },
    grid: [
      { x: '8%', y: '20%', height: '30%' },
      { x: '8%', y2: '15%', height: '38%' }
    ],
    //多个图，就要定义多个x轴，虽然我这个表的x轴是一样的
    xAxis: [
      {
        show: false, //隐藏了x轴
        type: 'category',
        gridIndex: 0, //对应前面grid的索引位置（第一个）
        axisTick: {
          alignWithLabel: true
        },

        axisLabel: {
          interval: 6 //x轴显示的数量，我这里是动态算的
        },
        data: props.xLabels
      },
      {
        show: true,
        type: 'category',
        min: '30',
        max: '100',
        splitLine: {
          show: true
        },
        axisTick: {
          alignWithLabel: true
        },
        gridIndex: 1, //对应前面grid的索引位置（第二个）
        //   axisLabel:{
        //     interval:1,
        // },
        data: props.xLabels
      }
    ],
    //y轴，不管有几个x轴，几个y轴，或者图，只要找到他对应的grid图的序号索引就可以精准匹配
    yAxis: [
      {
        type: 'value',
        gridIndex: 1, //对应前面grid的索引位置（第二个）
        name: '流量',
        nameLocation: 'middle',
        position: 'right',
        splitNumber: 3,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#000'
          }
        },
        nameTextStyle: {
          padding: [15, 0, 0, 0]
        },
        axisLabel: {
          formatter: '{value}'
        }
      },
      {
        type: 'value',
        gridIndex: 1,
        nameLocation: 'middle',
        name: '水位',
        splitNumber: 3,
        position: 'left',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#000'
          }
        },
        nameTextStyle: {
          padding: [0, 0, 10, 0]
        },
        axisLabel: {
          formatter: '{value}',
          showMaxLabel: false
        }
      },
      {
        type: 'value',
        gridIndex: 0,
        name: '降雨量',
        position: 'left',
        splitNumber: 3,
        nameLocation: 'middle', //y轴name的位置
        inverse: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#000'
          }
        },
        nameTextStyle: {
          padding: [0, 0, 10, 0]
        },
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            fontSize: 12 //y轴坐标轴上的字体大小
          }
        }
      },
      {
        type: 'value',
        gridIndex: 0,
        name: '',
        position: 'right',
        splitNumber: 3,
        nameLocation: 'middle', //y轴name的位置
        inverse: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#000'
          }
        },
        nameTextStyle: {
          padding: [0, 0, 10, 0]
        },
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            fontSize: 12 //y轴坐标轴上的字体大小
          }
        }
      }
    ],

    //数据就要选择是哪个x,y轴与之对应
    series: [
      {
        name: '模拟水位',
        type: 'line',
        showSymbol: false,
        xAxisIndex: 1, //对应前面x的索引位置（第二个）
        yAxisIndex: 1, //对应前面y的索引位置（第一个）
        smooth: true,
        stack: '模拟水位',
        // itemStyle: {
        //   normal: {
        //     lineStyle: {
        //       color: '#d8a6af'
        //     }
        //   }
        // },
        data: props.simulateWater,
        min: 0
      },
      {
        name: '实测水位',
        type: 'line',
        smooth: true,
        showSymbol: false,
        xAxisIndex: 1,
        yAxisIndex: 1,
        stack: '实测水位',
        // itemStyle: {
        //   normal: {
        //     lineStyle: {
        //       color: '#887dcb'
        //     }
        //   }
        // },
        data: props.realwaterLevel,

        min: 0
      },
      {
        name: '实测流量',
        type: 'line',
        barWidth: '20%',
        smooth: true,
        showSymbol: false,
        xAxisIndex: 1,
        yAxisIndex: 0,
        stack: '实测流量',
        data: props.realFlow,
        // itemStyle: {
        //   color: 'blue'
        // },
        min: 0
      },
      {
        name: '降雨量',
        type: 'bar',
        barWidth: '20%',
        barGap: '-100%',
        smooth: true,
        xAxisIndex: 0,
        yAxisIndex: 2,
        stack: '降雨量',
        data: props.rainArea,
        // itemStyle: {
        //   color: 'blue'
        // },
        min: 0
      },
      {
        name: '模拟流量',
        type: 'line',
        smooth: true,
        showSymbol: false,
        xAxisIndex: 1,
        yAxisIndex: 0,
        stack: '模拟流量',
        // itemStyle: {
        //   normal: {
        //     lineStyle: {
        //       color: 'red'
        //     }
        //   }
        // },
        data: props.simulateFlow
        // min:0
      },
      {
        name: '警戒流量',
        type: 'line',
        smooth: true,
        showSymbol: false,
        xAxisIndex: 1,
        yAxisIndex: 0,
        stack: '警戒流量',
        // itemStyle: {
        //   normal: {
        //     lineStyle: {
        //       color: 'yellow'
        //     }
        //   }
        // },
        data: [props.warnInfo?.wrq || ''],
        // min:0
        markLine: {
          symbol: 'none', // 去掉标线最后面的箭头
          data: [
            {
              silent: false, // 鼠标悬停事件  true没有，false有
              lineStyle: {
                type: 'solid'
                // color: '#FF0000'
              },
              label: {
                position: 'insideEndBottom', // start middle end
                formatter: '警戒流量：{c}'
              },
              name: '警戒线',
              yAxis: props.warnInfo?.wrq || ''
            }
          ]
        }
      },

      {
        name: '警戒水位',
        type: 'line',
        smooth: true,
        showSymbol: false,
        xAxisIndex: 1,
        yAxisIndex: 1,
        stack: '警戒水位',
        data: [props.warnInfo?.wrz || ''],
        markLine: {
          symbol: 'none', // 去掉标线最后面的箭头
          data: [
            {
              silent: false, // 鼠标悬停事件  true没有，false有
              lineStyle: {
                type: 'solid'
                // color: '#FF0000'
              },
              label: {
                position: 'insideEndBottom', // start middle end
                formatter: '警戒水位：{c}'
              },
              name: '警戒水位线',
              yAxis: props.warnInfo?.wrz || ''
            }
          ]
        }
      },

      {
        name: '汛限水位',
        type: 'line',
        smooth: true,
        showSymbol: false,
        xAxisIndex: 1,
        yAxisIndex: 1,
        stack: '汛限水位',
        data: [props.warnInfo?.fsltdz || ''],
        markLine: {
          symbol: 'none', // 去掉标线最后面的箭头
          data: [
            {
              silent: false, // 鼠标悬停事件  true没有，false有
              lineStyle: {
                type: 'solid'
                // color: '#FF0000'
              },
              label: {
                position: 'insideStartBottom', // start middle end
                formatter: '汛限水位：{c}'
              },
              name: '汛限水位线',
              yAxis: props.warnInfo?.fsltdz || ''
            }
          ]
        }
      },
      {
        name: '允许最高水位',
        type: 'line',
        smooth: true,
        showSymbol: false,
        xAxisIndex: 1,
        yAxisIndex: 1,
        stack: '允许最高水位',
        data: [props.warnInfo?.allMaxLev || ''],
        markLine: {
          symbol: 'none', // 去掉标线最后面的箭头
          data: [
            {
              silent: false, // 鼠标悬停事件  true没有，false有
              lineStyle: {
                type: 'solid'
                // color: '#FF0000'
              },
              label: {
                position: 'insideEndTop', // start middle end
                formatter: '允许最高水位：{c}'
              },
              name: '允许最高水位线',
              yAxis: props.warnInfo?.allMaxLev || ''
            }
          ]
        }
      },
      {
        name: '允许雍高水位',
        type: 'line',
        smooth: true,
        showSymbol: false,
        xAxisIndex: 1,
        yAxisIndex: 1,
        stack: '允许雍高水位',
        data: [props.warnInfo?.allRaiseLev || ''],
        markLine: {
          symbol: 'none', // 去掉标线最后面的箭头
          data: [
            {
              silent: false, // 鼠标悬停事件  true没有，false有
              lineStyle: {
                type: 'solid'
                // color: '#FF0000'
              },
              label: {
                position: 'insideStartTop', // start middle end
                formatter: '允许雍高水位：{c}'
              },
              name: '允许雍高水位线',
              yAxis: props.warnInfo?.allRaiseLev || ''
            }
          ]
        }
      },

      {
        name: '预报时间',
        type: 'line',
        smooth: true,
        showSymbol: false,
        xAxisIndex: 1,
        yAxisIndex: 1,
        stack: '预报时间',
        data: [props.fcTime],
        markLine: {
          symbol: 'none', // 去掉标线最后面的箭头
          data: [
            {
              silent: false, // 鼠标悬停事件  true没有，false有
              lineStyle: {
                type: 'solid'
                // color: '#FF0000'
              },
              label: {
                position: 'end', // start middle end
                formatter: '预报时间：{c}'
              },
              name: '预报时间',
              xAxis: props.fcTime
            }
          ]
        }
      }
    ],
    dataZoom: [
      {
        type: 'slider',
        show: true,
        height: 20,
        bottom: '0%',
        start: 0,
        end: 100
      },
      {
        type: 'inside'
      }
    ],
    toolbox: {
      //
      show: true
      // feature: {
      //   myFull: {
      //     show: true,
      //     title: "全屏查看",
      //     icon:
      //       "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
      //     onclick: () => {
      //       state.fullFlag = true;
      //       let element = document.getElementById("chartsMax");

      //       // 一些浏览器的兼容性
      //       if (element.requestFullScreen) {
      //         // HTML W3C 提议
      //         element.requestFullScreen();
      //       } else if (element.msRequestFullscreen) {
      //         // IE11
      //         element.msRequestFullScreen();
      //       } else if (element.webkitRequestFullScreen) {
      //         // Webkit (works in Safari5.1 and Chrome 15)
      //         element.webkitRequestFullScreen();
      //       } else if (element.mozRequestFullScreen) {
      //         // Firefox (works in nightly)
      //         element.mozRequestFullScreen();
      //       }

      //       // 退出全屏
      //       if (element.requestFullScreen) {
      //         document.exitFullscreen();
      //       } else if (element.msRequestFullScreen) {
      //         document.msExitFullscreen();
      //       } else if (element.webkitRequestFullScreen) {
      //         document.webkitCancelFullScreen();
      //       } else if (element.mozRequestFullScreen) {
      //         document.mozCancelFullScreen();
      //       }
      //     },
      //   },
      // },
    }
  }
})
</script>

<style lang="less" scoped>
.line-echart {
  height: 100%;
}
#chartsMax {
  background: #f2f2f2;
}
</style>
